<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        background="#3296F1"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
        @focus="isShowRes = false"
      />
    </form>
    <!-- 搜索结果 -->
    <SearchResults v-if="isShowRes" :searchText="value"/>
    <!-- 搜索历史 -->
    <SearchHistory v-else-if="!value" :histor = "histor" @onsht = "onSearch" @delQb = "histor = []"/>
    <!--搜索联想建议  -->
    <SearchSuggestion v-else  :searchText= "value" @onSearch = "onSearch"/>
  </div>
</template>

<script>
import SearchHistory from './components/SearchHistory.vue'
import SearchSuggestion from './components/SearchSuggestion.vue'
import SearchResults from './components/SearchResults.vue'
import { getStorage, setStorage } from '@/utils/storage.js'
export default {
  data () {
    return {
      value: '',
      isShowRes: false,
      histor: getStorage('TT-HISTOR') || []
    }
  },
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResults
  },
  created () {

  },
  watch: {
    histor: {
      deep: true,
      handler (val) {
        setStorage('TT-HISTOR', val)
      }
    }
  },
  methods: {
    onSearch (val) {
      this.value = val
      this.isShowRes = true
      this.histor.unshift(val)
      this.histor = [...new Set(this.histor)]
    }
  }
}
</script>

<style scoped lang='less'>
  .search {
    .van-search__action {
      color: #fff;
    }
  }
</style>
